<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>通用适配应用</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/flexible.js"></script>
</head>
<body>
    <header class="header-container">
        <div class="navbar">
            <div class="navbar-left">
                <i class="iconfont icon-scan"></i>
            </div>
            <div class="navbar-center">
                <div class="searchBox">
                    <div class="searchBox-prepend">
                        <i class="iconfont icon-search"></i>
                    </div>
                    <input type="text" class="searchBox-input" placeholder="开学季有礼，好货5折起">
                    <div class="searchBox-append">
                        <i class="iconfont icon-close"></i>
                    </div>
                </div>
            </div>
            <div class="navbar-right">
                <i class="iconfont icon-msg"></i>
            </div>
        </div>
    </header>

    <div class="main-container">
        <div class="slider-container">
            <img src="img/slider/1.jpg" alt="slider">
        </div>

        <nav class="nav-container">
            <ul class="nav">
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/1.png" alt="nav" class="nav-img">
                        <span class="nav-text">团购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/2.png" alt="nav" class="nav-img">
                        <span class="nav-text">一元购</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/3.png" alt="nav" class="nav-img">
                        <span class="nav-text">优惠券</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/4.png" alt="nav" class="nav-img">
                        <span class="nav-text">教育</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/5.png" alt="nav" class="nav-img">
                        <span class="nav-text">旅行</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/6.png" alt="nav" class="nav-img">
                        <span class="nav-text">在线订餐</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/7.png" alt="nav" class="nav-img">
                        <span class="nav-text">庆典</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/8.png" alt="nav" class="nav-img">
                        <span class="nav-text">秒杀</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/9.png" alt="nav" class="nav-img">
                        <span class="nav-text">拍卖</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="###" class="nav-link">
                        <img src="img/nav/10.png" alt="nav" class="nav-img">
                        <span class="nav-text">服务</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="recommend-container">
            <ul class="recommend">
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/1.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">欧派整体橱柜定制简约现代</p>
                        <p class="recommend-origPrice">
                            <del>¥2000.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span>
                            <span class="recommend-count">985件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/2.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">创维55吋4K超高清HDR</p>
                        <p class="recommend-origPrice">
                            <del>¥2999.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">2299</strong></span>
                            <span class="recommend-count">63件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/3.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">【到手259元】苏泊尔 5L电压力锅</p>
                        <p class="recommend-origPrice">
                            <del>¥799.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">299</strong></span>
                            <span class="recommend-count">1908件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/4.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">三只松鼠坚果礼包</p>
                        <p class="recommend-origPrice">
                            <del>¥125.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span>
                            <span class="recommend-count">9532件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/5.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">蓝月亮洗衣液12斤</p>
                        <p class="recommend-origPrice">
                            <del>¥133.40</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
                            <span class="recommend-count">5399件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/6.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">福临门葵花玉米油</p>
                        <p class="recommend-origPrice">
                            <del>¥109.90</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
                            <span class="recommend-count">6294件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/7.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">TP-LINK 全千兆端口双频无线路由器</p>
                        <p class="recommend-origPrice">
                            <del>¥179.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">169</strong></span>
                            <span class="recommend-count">4255件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/8.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">【前1800名再减50】家用高压洗车机</p>
                        <p class="recommend-origPrice">
                            <del>¥790.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">268</strong></span>
                            <span class="recommend-count">1599件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/9.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">德国鲁茜rusch迷你婴儿辅食机 宝宝</p>
                        <p class="recommend-origPrice">
                            <del>¥898.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">159</strong></span>
                            <span class="recommend-count">881件已售</span>
                        </p>
                    </a>
                </li>
                <li class="recommend-item">
                    <a href="###" class="recommend-link">
                        <p class="recommend-pic">
                            <img src="img/recommend/10.jpg" alt="recommend" class="recommend-img">
                        </p>
                        <p class="recommend-name">西域之尚红枣500g*5袋</p>
                        <p class="recommend-origPrice">
                            <del>¥89.00</del>
                        </p>
                        <p class="recommend-info">
                            <span class="recommend-price">¥<strong class="recommend-price-num">29.9</strong></span>
                            <span class="recommend-count">15049件已售</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="tabbar-container">
        <ul class="tabbar">
            <li class="tabbar-item tabbar-item-active">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-category"></i>
                    <span>分类页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-cart"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-personal"></i>
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>